<template>
	<scroll-view scroll-y="true" class="index_container" @scroll="handleScroll">
		<!-- 搜索框 -->
		<view class="search_box" @click="gotoSearchPage">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="输入商品名称" clearButton="auto" cancelButton="none" readonly="true"/>
		</view>
		<!-- 轮播图 -->
		<view class="slideshow">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000">
				<!-- 遍历展示轮播图 -->
				<swiper-item v-for="(item, index) of slideDatas" :key="index">
					<view class="swiper-item">
						<img class="swiper_item_pic" :src="baseUrl + item.picture" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 热门分类 -->
		<view class="hot_class">
			<view class="hot_item" 
				v-for="(item, index) of hotClassDatas" 
				:key="index" 
				@click="gotoGoodsList(item)"
				>
				<view class="hot_img_box">
					<img class="hot_img" :src="baseUrl + item.picture" alt="" />
				</view>
				<view class="hot_text">
					{{ item.typeName }}
				</view>
			</view>
		</view>
		<!-- 商品列表组件 -->
		<view class="goods_list_box" >
			<GoodsList ref="goodsList" showType="index" typeValue="non" />
		</view>
	</scroll-view>
</template>

<script setup>
import { ref, onMounted } from "vue"
import GoodsList from "../../components/GoodsList/GoodsList.vue"
import { onShow } from '@dcloudio/uni-app';

// 轮播图数据
let slideDatas = ref([]);
// 热门分类数据
let hotClassDatas = ref([]);
// 图片基础路径
let baseUrl = uni.$baseUrl

let goodsList = ref(null);

onMounted(()=>{
	// 获取元素内容和图片渲染
	initPage();
	
})

onShow(()=>{
	uni.$loadCarBadge();
})

// 滚动监听是否触底，动态懒加载商品数据
function handleScroll(event) {
	const systemInfo = uni.getWindowInfo();
	const pageHeight = systemInfo.windowHeight; 
	const { scrollTop, scrollHeight } = event.target;
	// 判断是否滚动到底部
	if (scrollTop + pageHeight + 60 >= scrollHeight) {
		console.log("触底");
		console.log(goodsList.value);
		goodsList.value.loadMore(); // 调用子组件的方法进行懒加载
	}
}

// 获取页面元素内容数据渲染
async function initPage(){
	// 获取轮播图数据
	const slidRes = await uni.$http.get(`/pageElements/getByPosition/index_slideshow`);
	if(slidRes.data.code != 1){
		uni.showToast({
			icon:"none",
			title:"获取轮播图失败!"
		})
		return 0;
	}
	// 存储数据
	slideDatas.value = slidRes.data.data;

	// 获取热门8分类数据
	const hotRes = await uni.$http.get(`/typeInfos/getHotTypeData`);
	if(slidRes.data.code != 1){
		uni.showToast({
			icon:"none",
			title:"分类获取失败!"
		})
		return 0;
	}
	hotClassDatas.value = hotRes.data.data;
}

// 跳转商品列表页面
function gotoGoodsList(item){
	uni.navigateTo({
		url:`/subPkg1/goods_list/goods_list?navText=${item.typeName}&type=type`
	})
}

// 跳转搜索页面
function gotoSearchPage(){
	uni.navigateTo({
		url: "/subPkg2/search/search"
	})
}
</script>

<style scoped>
.search_box {
	width: 100vw;
	background-color: #fff;
}

.swiper {
	height: 370rpx;
	position: relative;
}

.swiper_item_pic {
	width: 100%;
}

.hot_class {
	/* margin-top: 20rpx; */
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-color: #fff;
	justify-content: space-around;
	padding: 5px 0px 10px 0px;
}

.hot_item {
	width: 23%;
	/* border: solid red 1px; */
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 13px;
}

.hot_img {
	width: 80rpx;
	height: 80rpx;
	padding: 3px 3px;
	border-radius: 50%;
	background: rgba(255, 158, 139, 0.3);
}

.index_container{
	height: 100vh;
	overflow-y: auto;
}
</style>
